<template>
  <div style="width: 100%">
    <div v-if="myContentList.length > 0" class="mis-meeting-transfer">
      <el-row class="mis-row">
        <el-descriptions
          class="margin-top"
          :column="1"
          border
          :labelStyle="LS"
          v-for="(item, index) in myContentList"
          :key="item.ctIdtemp"
        >
          <el-descriptions-item label-class-name="des-label">
            <!-- <template slot="label">
                <mis-select-tree
                      :mis-tree-type="217"
                      :setValue="item.ctType"
                      :disabled="true"
                    ></mis-select-tree>
            </template>-->
            <template slot="label">
              <span>{{ item.ctName }}</span>
            </template>
            <span style="word-break: break-all">{{
              item.ctMeetingContent
            }}</span>
            <span
              style="
                float: right;
                color: red;
                marginright: 20px;
                cursor: pointer;
              "
            >
              <i
                class="el-icon-edit"
                style="marginright: 20px; color: #13ce66"
                @click="
                  () => {
                    handleEdit(item);
                  }
                "
                v-if="!disabled"
              ></i>
              <i
                class="el-icon-delete"
                style="marginright: 20px; color: #e6a23c"
                @click="
                  () => {
                    handleDel(item);
                  }
                "
                v-if="!disabled"
              ></i>
              <i
                class="el-icon-top"
                @click="
                  () => {
                    handleUp(index);
                  }
                "
                v-if="!disabled"
              ></i>
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
    </div>
    <div class="mis-input" v-else>
      <el-input readonly />
    </div>
    <el-button
      :disabled="disabled"
      class="mis-button"
      @click="
        () => {
          clearList();
        }
      "
      >清 空</el-button
    >
    <el-button
      :disabled="disabled"
      class="mis-button"
      icon="el-icon-plus"
      @click="
        () => {
          handleClick();
        }
      "
    ></el-button>

    <el-dialog
      :visible.sync="openMeetingTransfer"
      v-if="openMeetingTransfer"
      class="mis-meeting-transfer-dialog"
      :title="dialogTitle"
      @close="cancel()"
      @open="openDialog"
      append-to-body
    >
      <el-button
        type="primary"
        size="mini"
        @click="add"
        v-if="!isEdit"
        class="addButton"
        >新增</el-button
      >
      <el-input
        placeholder="请输入会议类型"
        clearable
        size="small"
        v-model="meetType"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px; width: 48%"
      />
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        class="main-form"
      >
        <el-row style="width: 48%; float: left; margin-right: 20px">
          <el-form-item>
            <el-tree
              node-key="ctCode"
              :data="deptOptions"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              :default-expand-all="true"
              :default-expanded-keys="[defaultExpandKeys]"
              :highlight-current="true"
              @node-click="handleNodeClick"
              class="treeStyle"
              :style="{ overflow: 'auto' }"
              :render-content="misRenderContent"
            ></el-tree>
          </el-form-item>
        </el-row>
        <el-row style="width: 48%; float: left">
          <el-form-item label="会议类型" prop="ctType">
            <el-input
              v-model="meetingType"
              placeholder="请输入会议类型"
              disabled
              class="meetingTypeInput"
            />
          </el-form-item>
          <el-form-item :label="contentLabel" prop="ctMeetingContent">
            <el-input
              v-model="form.ctMeetingContent"
              placeholder="请输入内容"
              type="textarea"
              maxlength="2000"
              :rows="12"
              @input="ctMeetingContentFocus($event)"
              show-word-limit
            />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="default" @click="cancel">关闭</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </el-dialog>


    <el-dialog
      :visible.sync="open"
      v-if="open"
      title="第一议题选择"
      width="1200px"
      @close="cancel()"
      append-to-body
    >
      <div style="padding: 10px">
        <!--prop="ct_fun_name"-->
        <el-table :data="selectContentList" border :height="400">
          <el-table-column
            label="序号"
            align="center"
            header-align="center"
            type="index"
            width="80px"
          />
          <el-table-column
            label="议题名称"
            align="left"
            width="250px"
            header-align="center"
            prop="ctName"
          />
          <el-table-column
            label="议题名称"
            align="left"
            header-align="center"
            prop="ctContent"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="80px"
          >
            <template slot-scope="scope">
              <el-button
                size="medium"
                type="text"
                icon="el-icon-view"
                @click="handleUpdate(scope.row)"
                title="选择"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button type="default" @click="clearAndClose">置空</el-button>
        <el-button type="default" @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import store from "@/store/index";
import { getFunNo } from "@/utils/party";
import MisSelectTree from "@/components/SpsPublic/treeview/MisSelectTree";
import { misRenderContent } from "@/utils";
import { getTreeView } from "@/api/spsParty/treeView.js";
import { meetingContentBuss } from "@/api/spsPublic/meetingContent";
import { tableData } from "../Dynamic/tableData";
export default {
  name: "MeetingContent",
  components: {
    MisSelectTree,
  },
  data() {
    return {
      LS: {
        width: "20%",
      },

      rules: {
        // ctMeetingContent: [
        //   {
        //     required: true,
        //     message: "会议内容不能为空",
        //     trigger: "blur",
        //   },
        // ],
        // meetingType: [
        //   {
        //     required: true,
        //     message: "会议类型不能为空",
        //     trigger: "blur",
        //   },
        // ],
      },
      meetType: "", // 输入框筛选树
      meetingType: "",
      form: { ctType: undefined, ctName: undefined },
      openMeetingTransfer: false,
      isEdit: false,
      //默认值
      defalutValue: [],
      defaultExpandKeys: [],
      open: false,
      selectContentList: [],
      selectList: [],
      tempList: [],
      deptOptions: [],
      funNo: getFunNo(this.$route),
      //人员名称
      userName: undefined,
      event: "check",
      contentLabel:"会议内容",
      // 遮罩层
      loading: [],
      myContentList: "",
    };
  },
  props: {
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    dialogTitle: {
      type: String,
      default: "会议内容",
    },
    //初始数据
    contentList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    contentList: {
      handler(val, oldVal) {
        this.myContentList = val.map((item) => {
          return { ...item, ctIdtemp: item.ctIdtemp || item.ctId };
        });
      },
      deep: true,
      immediate: true,
    },
    meetType(val) {
      this.$refs.tree.filter(val);
    },
  },

  // computed: {
  //   myContentList:{
  //     get(){
  //       return this.contentList
  //     },
  //   }
  // },
  created() {
    this.getTree();
  },

  mounted() {},
  methods: {
    misRenderContent,
    handleClick() {
      // 打开弹框
      this.form = {};
      this.meetingType = "";
      this.isEdit = false;
      this.openMeetingTransfer = true;
    },
    handleEdit(item) {
      this.form = item;
      this.meetingType = item.ctName;
      this.isEdit = true;
      this.openMeetingTransfer = true;
    },
    handleDel(item) {
      // if (this.myContentList.length === 1) {
      //   this.$message.warning('至少保留一条会议内容')
      //   return
      // }
      let index = this.myContentList.findIndex((i) => {
        return i.ctIdtemp == item.ctIdtemp;
      });
      this.myContentList.splice(index, 1);
      this.$emit("updateMeetingContentVal", this.myContentList);
    },
    handleChangeOrder(arr, indexAdd, indexDel) {
      arr[indexAdd] = arr.splice(indexDel, 1, arr[indexAdd])[0];
      return arr;
    },
    // 上移，与前一个元素交换顺序
    handleUp(index) {
      if (index - 1 >= 0) {
        this.myContentList = this.handleChangeOrder(
          this.myContentList,
          index,
          index - 1
        );
        this.$emit("updateMeetingContentVal", this.myContentList);
      }
    },
    add() {
      if (this.form.ctMeetingContent) {
        if (this.meetingType) {
          this.form.ctName = this.meetingType;
          this.myContentList.push({
            ...this.form,
            ctIdtemp: new Date().getTime() + "",
          });
          this.$emit("updateMeetingContentVal", this.myContentList);
          // console.log("临时保存的", this.myContentList);
          this.$nextTick(() => {
            this.form = {};
            this.meetingType = "";
          });
        } else {
          this.msgError("请选择会议类型");
        }
      } else {
        this.msgError("会议内容不能为空");
      }
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (Array.isArray(data.children)) {
        // 有根节点无法点击
      } else {
        this.form.ctMeetingContent = data.ctContent;
        this.meetingType = data.label;
        this.form.ctType = data.ctType
        if(data.ctType == '840' || data.ctType == '940') { // 已经配置会议记录
          this.form.ctOther3 = data.ctCode
        }
        if(data.ctType == '840'){
           this.contentLabel = "第一议题"
        }else{
          this.contentLabel = "会议内容"
        }
      }
    },
    ctMeetingContentFocus(e) {
      this.$forceUpdate();
    },
    submit() {
      let that = this;
      if (this.form.ctMeetingContent) {
        if (!that.isEdit || this.myContentList.length == 0) {
          // 新增
          if (that.meetingType) {
            that.form.ctName = that.meetingType;
            that.myContentList.push({
              ...that.form,
              ctIdtemp: new Date().getTime() + "",
            });
            that.openMeetingTransfer = false;
          } else {
            that.msgError("请选择会议内容类型");
            that.openMeetingTransfer = true;
          }
        } else {
          // 编辑
          if (that.meetingType) {
            that.form.ctName = that.meetingType;
            that.myContentList.push({
              ...that.form,
              ctIdtemp: new Date().getTime() + "",
            });
            that.myContentList.pop();
            that.openMeetingTransfer = false;
          } else {
            that.msgError("请选择会议类型");
            that.openMeetingTransfer = true;
          }
        }
        that.$emit("updateMeetingContentVal", that.myContentList);
        // console.log("临时保存的", that.myContentList);
        that.form = {};
        that.meetingType = "";
      } else {
        that.msgError("会议内容不能为空");
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    updateSelectTreeValType(val) {
      if (this.form.ctType != val) {
        this.$set(this.form, "ctMeetingContent", "");
        this.$set(this.form, "ctOther3", "");
      }
      this.$set(this.form, "ctType", val);
      this.$refs.form.validateField("ctType");
      if (val == "00") {
        this.open = true;
        this.getList();
      }
    },
    getList() {
      this.getData().then((response) => {
        this.selectContentList = response.rows;
      });
    },
    getTree() {
      let params = 2171;
      getTreeView(params).then((response) => {
        if (response.code == 200) {
          meetingContentBuss(this.funNo).then((response) => {
            if (response.code == "200") {
              // response.data.forEach((item) => {
              //   this.$refs.tree.setChecked(item.ctCode, true, false);
              // });
              let data1 = response.data;
              let arr = [];
              data1.map((item) => {
                arr.push(this.normalizer(item));
              });
              this.deptOptions = this.handleTree(arr, "id", "parentId");
              // console.log("this.deptOptions", this.deptOptions);
            }
          });
        }
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.ctLevelC,
        parentId: node.ctLevelP,
        label: node.ctName,
        ctCode: node.ctCode,
        ctContent: node.ctContent,
        ctType: node.ctType,
        ctOther3: node.ctCode
      };
    },
    getData() {
      return request({
        method: "get",
        url: "/spsBranch/news/list?ctFunNo=1030",
      });
    },
    close() {
      this.open = false;
    },
    openDialog() {
      this.openMeetingTransfer = true;
      this.getTree();
    },
    clearAndClose() {
      this.$set(this.form, "ctMeetingContent", "");
      this.$set(this.form, "ctOther3", "");
      this.open = false;
    },
    updateSelectTreeContentType(val) {
      // this.$set(this.form, 'ctName', val)

      this.form.ctName = val;
      //       this.$nextTick(()=>{
      //   this.$refs.form.validateField('ctName')
      // })
    },
    clearList() {
      this.$confirm("是否确认删除所有会议内容?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.myContentList = [];
          this.$emit("updateMeetingContentVal", this.myContentList);
        })
        .catch(() => {});
    },
    clearForm() {
      this.form = {};
    },
    cancel() {
      this.form = {};
      this.openMeetingTransfer = false;
    },
    handleUpdate(row) {
      this.$set(this.form, "ctMeetingContent", row.ctContent);
      this.$set(this.form, "ctOther3", row.ctId);
      this.$refs.form.validateField("ctMeetingContent");
      this.close();
    },
  },
};
</script>
<style lang="scss" scoped>
.mis-input {
  width: calc(100% - 152px);
  float: left;
}
.mis-button {
  // width: 60px;
  margin-left: 8px;
  float: right;
}
.mis-meeting-transfer {
  .des-label {
    width: 100px;
    color: red;
  }
  .des-tag {
    margin-left: 4px;
    margin-bottom: 4px;
  }
  .mis-row {
    width: calc(100% - 152px);
    float: left;
  }
  .mis-button {
    float: right;
  }
  .tree-ul {
    padding-inline-start: 5px;
    .tree-li {
      cursor: pointer;
    }
  }
  span {
    i {
      margin-right: 20px;
    }
  }
}
.mis-meeting-transfer-dialog {
  .height100 {
    height: 100%;
  }
  .height33 {
    height: 33%;
  }
  .ul-height1 {
    height: calc(100vh - 315px);
  }

  ::v-deep .el-dialog {
    .el-dialog__body {
      position: relative;
      padding: 10px 15px 0 15px !important;
      background: #FFF;
      .el-form {
        overflow: hidden;
        height: 400px;
        .el-form-item__content {
          margin-left: 0 !important;
          .el-tree {
            height: 400px;
            overflow: auto;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            border-radius: 4px;
            border: 1px solid #e6ebf5;
            &::before {
              height: 0 !important;
            }
          }
          .meetingTypeInput {
            .el-input__inner {
              background: #FFF;
            }
          }
        }
      }
      .addButton {
        position: absolute;
        right: 2%;
        display: inline-block;
      }
      .dialog-col {
        height: calc(100vh - 270px);
        display: table;
        .dialog-col-button-block {
          text-align: center;
          display: table-cell;
          vertical-align: middle;
        }
        .dialog-col-div {
          .head-container {
            height: 35px;
          }
          .tree-ul-container {
            height: calc(100% - 35px);
            overflow: auto;
          }
          // border: 1px solid red;
          background-color: #ffffff;
          border: 1px solid #f5f5f5;
          border-radius: 5px;
          height: calc(100vh - 270px);
          overflow: auto;
          .dialog-tree {
            height: calc(100vh - 320px);
            overflow: auto;
          }
        }
        .dialog-sub-row {
          height: 100%;
          .dialog-sub-col {
            height: 33%;
            display: table;
            .dialog-sub-row-button-block {
              text-align: center;
              display: table-cell;
              vertical-align: middle;
            }
            .dialog-col-sub-div {
              .head-container {
                height: 35px;
              }
              .tree-ul-container {
                height: calc(100% - 35px);
                overflow: auto;
              }
              background-color: #ffffff;
              border: 1px solid #f5f5f5;
              border-radius: 5px;
              height: 100%;
              overflow: auto;
              .dialog-tree {
                height: calc(100vh - 320px);
                overflow: auto;
              }
            }
          }
        }
      }
    }
    .el-dialog__footer {
      background: #FFF;
    }
  }
}
</style>

